
import { Card, Collapse } from 'antd';
import { ToolType } from 'components/Three/constants/ToolType';
import { Radio, RadioChangeEvent } from 'antd';
import Controller from 'Controller';
import styles from './index.module.less';
import Model from './card/Model';

const { Panel } = Collapse;

const options = [
    { label: '选取（V）', value: ToolType.选取 },
    { label: '移动（M）', value: ToolType.移动 },
    { label: '形变（Q）', value: ToolType.形变 },
    { label: '旋转（R）', value: ToolType.旋转 },
    { label: '摄像机（C）', value: ToolType.摄像机 },
    { label: '模型(I)', value: ToolType.模型 },
];

/** 工具箱 */
export default function Toolbox() {

    const controller = Controller.instance;

    const threeController = controller.useMemo(s => s.threeController, []);

    const selectedTool = threeController.useMemo(s => s.selectedTool, []);

    return (
        <div className={styles.toolbox} >
            <Collapse defaultActiveKey={['1', '2']}>
                <Panel header="工具" className={styles.toolPanel} key="1">
                    <Radio.Group
                        className={styles.radio}
                        optionType="button"
                        value={selectedTool}
                        options={options}
                        onChange={threeController.pipeline<RadioChangeEvent>(async (s, e) => { s.selectedTool = e?.target.value })}
                    />
                </Panel>
            </Collapse>
            <Card title="工具属性" className={styles.card} >
                <Model />
            </Card>
        </div>
    )
}

